<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>条件语句</title>
    <style type="text/css">
        body {
            background: #000;
            color: cyan;
        }

        .edit {
            border: solid;
            border-width: 3px;
            border-radius: 5px;
            border-color: #f44336;
            font-size: 70px;
            padding: 5px;
            margin: 10px;
        }

        img {
            width: 80px;
            height: 80px;
        }

        h2 {
            margin-left: 15px;
        }
    </style>
</head>
<body>
<div id="vApp">
    <!--v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用-->
    <input type="text" class="edit" placeholder="判断输入的字符长度" v-model="inp">
    <h2 v-if="calLen(inp)>10">输入的字符长度大于10</h2>
    <h2 v-else-if="calLen(inp)>5">输入的字符长度大于5</h2>
    <h2 v-else-if="calLen(inp)>0">输入了字符</h2>
    <h2 v-else>没有输入字符</h2>
    <div>
        <!--也可以使用 v-show 指令来根据条件展示元素-->
        <img src="../asset/img/ic_user.png" v-show="calLen(inp)<=0">
        <img src="../asset/img/ic_question.png" v-show="calLen(inp)>0">
        <img src="../asset/img/ic_stop.png" v-show="calLen(inp)>5">
        <img src="../asset/img/ic_info.png" v-show="calLen(inp)>10">
    </div>
    <hr>
    <h1>v-if元素复用</h1>
    <h3>出于效率考虑，Vue在渲染元素的时候，会尽可能地复用自己已有的元素而非重新渲染。</h3>
    <h3>会复用</h3>
    <template v-if="ipType==='txt'">
        <input class="edit" placeholder="输入姓名">
    </template>
    <template v-else>
        <input class="edit" placeholder="输入邮箱">
    </template>
    <button @click="changeType">改变类型</button>
    <h3>不会复用</h3>
    <template v-if="ipType==='txt'">
        <input class="edit" placeholder="输入姓名" key="ip-name">
    </template>
    <template v-else>
        <input class="edit" placeholder="输入邮箱" key="ip-email">
    </template>
    <button @click="changeType">改变类型</button>
    <p>
        禁用v-if的复用方式就是添加一个唯一的key
    </p>
</div>
</body>
<script>
    new Vue({
        el: '#vApp',
        data: {
            inp: '',
            ipType: 'txt'
        },
        methods: {
            calLen: function (n) {
                if (!n) {
                    return 0;
                } else {
                    return n.split('').length;
                }
            },
            changeType: function () {
                this.ipType = this.ipType === 'txt' ? 'other' : 'txt';
            }
        }
    })
</script>
</html>